<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        label="头像">
        <template slot-scope="scope">
          <div class="goodsBox">
            <img :src="baseImgUrl+scope.row.headUrl" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="邀请时间">
      </el-table-column>
      <el-table-column
        prop="inviteMoney"
        label="贡献总收益">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="showDetail(scope.row)"
            size="small">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getMyInviteList"
        @current-change="getMyInviteList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {getMyInviteList} from  '@/api/setSharing'
  export default {
    name: 'invitationTable',
    data(){
      return{
        tableData: [],
        total:0,
        queryParams:{
          pageSize:10,
          pageNum:1,
        },
        baseImgUrl: process.env.VUE_APP_FILE_URL,
      }
    },
    created() {
      this.getMyInviteList()
    },
    methods:{
      getMyInviteList(){
        let param={
          ...this.queryParams,
          "userId":this.$route.query.id
        }
        getMyInviteList(param).then(res=>{
          if(res.code == 200){
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },
      showDetail(row){
        this.$emit('showDetail',row)
      }
    }
  }
</script>

<style scoped lang="scss">
  .goodsBox{
    img{
      width: 80px;
      height: 80px;
    }
  }

</style>
